<template>
    <svg aria-hidden="true" style="vertical-align: middle; cursor: pointer;" :class="$style.icon" :fill="color">
        <use :href="symbolId" />
    </svg>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        prefix?: string;
        name: string;
        color?: string;
    }>(),
    {
        prefix: "icon",
    }
);
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

<style scoped module>
.icon {
    width: 14px;
    height: 14px;
}
</style>
